<template>
  <div class="">
    <!-- 导航 开始 -->
    <nav-bar title="评论详情"></nav-bar>
    <!-- 导航 end -->

    <!-- 评论内容 开始 -->
    <div class="evaluate_content">
      <div class="evaluate">
        <!-- 头部 开始 -->
        <div class="head">
          <div class="user">
            <div class="avatar">
              <li-image :src="info.reviewerAvatar" v-if="info.reviewerAvatar" />
              <img
                src="@/assets/images/avatar_user.png"
                class="img"
                alt=""
                v-else
              />
            </div>
            <div class="info">
              <div class="name">{{ info.reviewer }}</div>
              <div class="rate">
                <img src="@/assets/images/rate.png" class="img" alt="" />
                <span>{{ info.scoreOverall }}分</span>
              </div>
            </div>
          </div>
          <div class="time">{{ info.createdDate }}</div>
        </div>
        <!-- 头部 end -->

        <!-- 评价内容 开始 -->
        <div class="content">
          <p>{{ info.content }}</p>
          <div class="img_list">
            <div
              class="img_box"
              v-for="(item, index) in info.commentPics || []"
              :key="`img_${index}`"
            >
              <li-image :src="item"></li-image>
            </div>
            <!-- <img src="@/assets/images/h_banner.png" v-for="(item, index) in 3" :key="index" alt=""> -->
          </div>
        </div>
        <!-- 评价内容 end -->
      </div>
    </div>
    <!-- 评论内容 end -->

    <!-- 医院 开始 -->
    <div class="hospital_content">
      <div class="cell">
        <div class="avatar">
          <!-- <img src="@/assets/images/avatar.png" alt=""> -->
          <li-image
            :src="oInfo.logo"
            class="img"
            v-if="oInfo.logo"
            :is-preview="false"
          ></li-image>
          <van-image
            :src="require('@/assets/images/avatar.png')"
            class="img"
            lazy-load
            v-else
          />
        </div>
        <div class="info">
          <div class="title">{{ oInfo.name }}</div>
          <div class="rate">
            <!-- <van-rate
              v-model="oInfo.initScore"
              allow-half
              :size="16"
              color="#FF6600"
              class="van_rate"
              readonly
            /> -->
            <li-rate
              v-model="oInfo.initScore"
              allow-half
              :size="16"
              color="#FF6600"
              class="van_rate"
              readonly
            />
            <span class="star">{{ oInfo.initScore }}分</span>
            <span class="num">近期有{{ oInfo.initAppointmentCnt }}人预约</span>
          </div>
          <div class="address">
            <span>{{ oInfo.cityName }}</span>
            <span class="lili_divider"></span>
            <span>{{ oInfo.districtName }}</span>
            <span>{{ oInfo.meter || "--" }}km</span>
          </div>
          <!-- <div class="tag_list">
                        <template v-for="(item, index) in (oInfo.featuredLabels || [])">
                            <div class="tag" :key="`label_${index}`" v-if="index < 3">{{ item }}</div>
                        </template>
                    </div> -->
        </div>
      </div>
    </div>
    <!-- 医院 end -->
  </div>
</template>
<script>
import { GET_COMMENT_INFO, GET_HOSPITAL_INFO } from "@/http/interface";
import { Rate } from "vant";
import { getDistance } from "@/utils/utils";
export default {
  components: {
    [Rate.name]: Rate,
  },
  data() {
    return {
      info: {},
      oInfo: {},
    };
  },
  head() {
    return {
      link:[
        {ref:'canonical',href:`${this.$domain}/evaluate/detail`}
      ]
    };
  },
  async asyncData({ query, $axios, $cookies }) {
    let params = { id: query.id };
    let res = await $axios.get(GET_COMMENT_INFO, { params: params });
    let info = res.data || {};

    // 获取医院信息
    let oInfo = {};
    let appointment = {};
    let hospital = {};
    let surroundings = {};
    if (info.hospitalId) {
      let hes = await $axios.get(GET_HOSPITAL_INFO, {
        params: { id: info.hospitalId },
      });
      let obj = hes.data || {};
      appointment = obj.appointment || {};
      hospital = obj.hospital || {};
      surroundings = obj.surroundings || {};
      oInfo = {
        ...appointment,
        ...hospital,
        ...surroundings,
      };
      let gps = $cookies.get("GPS")
      oInfo.meter = getDistance(gps.lng, gps.lat, hospital.lng, hospital.lat);
    }

    return { info, oInfo };
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/evaluate/detail.less";
</style>